<script setup>
import {ElMessage,ElMessageBox} from "element-plus"
import {reactive, ref, onMounted} from "vue";
import RoleApi from "@/api/RoleApi.js";
import PermissionApi from "@/api/PermissionApi.js";
const state = reactive({
  roleInfo:{},
  currentPage:1,
  pageSize:10,
  roleList:[],
  isSaveOperation:false,
  showSaveOrUpdateDialog:false,
  permissionList:[],
  roleBindMenuIds:[],
  currentClickRoleId:null,
})
onMounted(()=>{
  getRoleList()

})
const getRoleList =()=>{
  RoleApi.getRolePageList(state.currentPage,state.pageSize).then(res=>{
    state.roleList = res.data.data
  })
}



//修改编辑对话框部分
const saveOrUpdateRole=()=>{
  const operation = state.isSaveOperation ? RoleApi.addRole : RoleApi.updateRole;
  operation(state.roleInfo).then(()=>{
    getRoleList()
    state.showSaveOrUpdateDialog = false
  })

}

//获取角色信息
const getRoleInfo = (roleId)=>{
  RoleApi.getRoleInfoById(roleId).then(res=>{
    state.roleInfo = res.data
  })
}
const openSaveOrUpdateDialog=(roleId,isSave)=>{
  state.isSaveOperation = isSave
  state.currentClickRoleId = roleId
  state.showSaveOrUpdateDialog = true
  if (isSave){
    state.roleInfo ={}
  }else {
    getRoleInfo(roleId)
  }
}

//角色删除
const confirmRoleDelete=(roleId)=>{
  RoleApi.deleteRole(roleId).then(res=>{
    getRoleList()
    ElMessage.success("删除成功!")
  })
}


// 分配权限树
const showTreeDialog = ref(false)
const treeRef = ref(null)
/**
 * 打开角色菜单绑定对话框
 * @param roleId
 */
const openBindRolePermissionDialog = (roleId)=>{
  state.currentClickRoleId = roleId
  showTreeDialog.value = true
  PermissionApi.getPermissionList().then(res=>{
    state.permissionList = res.data
  })

}
const treeProps = {
  children:"children",
  label:"name"
}
/**
 * 打开角色菜单绑定dialog之后
 */
const rolePermissionTreeDialogOpen = ()=>{
  RoleApi.getRoleBindPermissionIds(state.currentClickRoleId).then(res=>{
    state.roleBindMenuIds = res.data
  })
}

const bindPermission=()=>{
  let menuIds = treeRef.value.getCheckedKeys()
  RoleApi.bindRoleWithPermission(state.currentClickRoleId,menuIds).then(res=>{
    ElMessage.success("绑定成功")
    showTreeDialog.value = false
  })
}


</script>
<template>
  <p style="margin: 5px 0">
    <el-button type="primary" @click="openSaveOrUpdateDialog(null,true)">
      新增角色<el-icon class="el-icon--right"><Plus /></el-icon>
    </el-button>
  </p>
  <el-table :data="state.roleList" border style="width: 100%">
    <el-table-column  align="center" prop="roleName" label="角色名称"  />
    <el-table-column  align="center" prop="roleTag" label="角色标识"  />
    <el-table-column  align="center" prop="roleDesc" label="角色描述" />
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button type="primary" text  icon="Edit" @click="openSaveOrUpdateDialog(scope.row.roleId,false)"/>
        <el-button type="primary" text  icon="Key" @click="openBindRolePermissionDialog(scope.row.roleId)"/>
        <el-popconfirm :title="`确定删除角色为【${scope.row.roleName}】吗？`"
                       @confirm="confirmRoleDelete(scope.row.roleId)"
                       confirm-button-text="确认" confirm-button-type="danger" cancel-button-text="取消" >
          <template  #reference>
            <el-button type="danger" text  icon="Delete" />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 修改编辑对话框 -->
  <el-dialog style="border-radius: 12px" v-model="state.showSaveOrUpdateDialog"  width="35%" center :title="state.isSaveOperation?'新增角色':'修改角色'">
    <el-form :model="state.roleInfo" label-position="top">
      <el-form-item label="角色名称">
        <el-input v-model="state.roleInfo.roleName"/>
      </el-form-item>
      <el-form-item label="角色标识">
        <el-input v-model="state.roleInfo.roleTag"/>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="state.roleInfo.roleDesc"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.showSaveOrUpdateDialog = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdateRole">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分配菜单权限 -->
  <el-dialog style="border-radius: 8px" v-model="showTreeDialog"
             @opened="rolePermissionTreeDialogOpen"
             @closed="state.roleBindMenuIds=[]" width="35%" center title="分配权限">
    <el-tree :props="treeProps" show-checkbox node-key="id"
             :default-checked-keys="state.roleBindMenuIds"
             :data="state.permissionList" ref="treeRef" ></el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showTreeDialog = false">取消</el-button>

        <el-button type="primary" @click="bindPermission">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>
<style scoped>
</style>


